/*
 * @Author: hongbin
 * @Date: 2022-11-22 10:21:57
 * @LastEditors: hongbin
 * @LastEditTime: 2022-12-02 19:40:07
 * @Description:聊天记录(内容)
 */
import { FC, useCallback, useRef } from "react";
import styled from "styled-components";
import { FlexDiv } from "../../../styled";
import { IChatRecord } from "./Friends";
import MessageList from "./MessageList";

interface IProps {
    msgs: IChatRecord["key"];
    sendMessage: (content: string) => void;
}

const ChatRecord: FC<IProps> = ({ msgs, sendMessage }) => {
    const inputRef = useRef<HTMLInputElement>(null);

    const send = useCallback(() => {
        const input = inputRef.current?.value;
        if (!input) return;
        sendMessage(input);
        inputRef.current.value = "";
    }, [sendMessage]);
    console.log("接收到聊天记录：", msgs);

    return (
        <Container>
            {msgs && <MessageList msgs={msgs} />}
            <FlexDiv
                css={{
                    position: "absolute",
                    bottom: 0,
                    left: 0,
                    width: "100%",
                }}
            >
                <input ref={inputRef} type="text" />
                <button onClick={send}>发送</button>
            </FlexDiv>
        </Container>
    );
};

export default ChatRecord;

const Container = styled.div`
    width: 20vw;
    height: calc(25vw - 2vmax);
    display: flex;
    flex-direction: column;
    scrollbar-width: none;
    input {
        height: 2vmax;
        padding-left: 1vmax;
        border: none;
        background: #0a3b02;
        width: 70%;
        transition: 0.3s;
        outline: none;

        :focus {
            background: #31582b;
            color: #fff;
        }
    }
    button {
        cursor: pointer;
        width: 30%;
        background: #68c45f;
        color: #fffae5;
        transition: 0.3s;
        border: none;
        :hover {
            font-weight: bold;
            background: #17610c;
        }
    }
`;
